<template>
    <validate-form  @form-submit="checkForm">
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
        <validate-input
          :rules="emailRules"
          v-model="loginForm.email"
          type="text"
          placeholder="请输入邮箱地址"
          ref=inputRef>
        </validate-input>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">密码</label>
        <validate-input
          :rules="pswRules"
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码">
        </validate-input>
      </div>
    </validate-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import ValidateInput, { rulesProps } from '../../components/ValidateInput.vue'
import ValidateForm from '../../components/ValidateForm.vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default defineComponent({
  components: {
    ValidateInput,
    ValidateForm
  },
  setup () {
    const router = useRouter() // 注意区分useRoute：获取路由信息和useRouter ：定义路由的行为
    const store = useStore() // 使用vuex
    const loginForm = reactive({
      email: '1610424323@qq.com',
      password: ''
    })
    const emailRules:rulesProps = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    const pswRules:rulesProps = [
      { type: 'required', message: '密码不能为空' },
      { type: 'range', min: { message: '你的密码至少包括6个字符,不能包含空格', length: 6 }, max: { message: '你的密码至多包括10个字符,不能包含空格', length: 10 } }
    ]
    const inputRef = ref<any>()
    // 点击提交按钮，一项一项验证表单
    const checkForm = (result:boolean) => {
      if (result) {
        router.push('/') // 跳转到首页
        store.commit('login')
      }
    }
    return {
      emailRules,
      pswRules,
      loginForm,
      checkForm,
      inputRef,
      router
    }
  }
})
</script>
